<script setup>
import { computed, watch } from "vue";
import { useSwitchPages } from "../pinia/index.js";
import Index from "../page/index.vue";
import Szsx from "../page/Szsx.vue";

const page = useSwitchPages();
let currentPage = page.page;
const component = {
  Index,
  Szsx,
};

watch(
  () => page.page, // 使用 getter 函数
  (newValue) => {
    currentPage = newValue;
  },
  {
    immediate: true,
    deep: true,
  },
);

const currentComponent = computed(() => {
  return component[currentPage];
});
</script>

<template>
  <keep-alive>
    <component :is="currentComponent" />
  </keep-alive>
</template>

<style scoped></style>
